import ProCard from '@ant-design/pro-card';
import { DatePicker } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import DetailedTabPane from './components/DetailedTabPane';
import PreviewTabPane from './components/PreviewTabPane';

const RankTabsModule: React.FC = ({}) => {
  const monthFormat = 'YYYY-MM';

  const startOfYear = moment().startOf('year');
  const endOffYear = moment().endOf('year');

  /**
   * 市级部门
   */
  const [data, setDataState] = useState<any[]>([]);

  useEffect(() => {
    // loadData([moment(startOfYear).format('YYYY-MM'), moment(endOffYear).format('YYYY-MM')]);
  }, []);

  const [tab, setTab] = useState('tab0');

  return (
    <>
      <ProCard
        title={'选题计划 - 媒体'}
        tabs={{
          activeKey: tab,
          onChange: (key) => {
            setTab(key);
          },
        }}
        extra={
          <DatePicker.RangePicker
            picker="month"
            allowClear={false}
            defaultValue={[startOfYear, endOffYear]}
            format={monthFormat}
            onChange={(date, dateString) => {
              // loadData(date);
            }}
          />
        }
      >
        <ProCard.TabPane key="tab0" tab="预览">
          <PreviewTabPane />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab1" tab="中央媒体">
          <DetailedTabPane />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="市属媒体">
          <DetailedTabPane />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="市外媒体">
          <DetailedTabPane />
        </ProCard.TabPane>
      </ProCard>
      <br />
    </>
  );
};

export default RankTabsModule;
